<template>
  <div class="datop">
    <el-dialog
      width="600px"
      :visible="value"
      style="text-align: center"
      @close="counte"
    >
      <template #title>
        <div>{{ title }}</div>
      </template>
      <el-form ref="form" label-width="100px" :model="form" :rules="rules">
        <el-form-item label="企业编号" prop="eid">
          <el-input v-model="form.eid" />
        </el-form-item>
        <el-form-item label="企业名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="企业简称" prop="short_name">
          <el-input v-model="form.short_name" />
        </el-form-item>
        <el-form-item label="企业简介" prop="intro">
          <el-input v-model="form.intro" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="text-align: center">
          <el-button type="primary" @click="confirm">确定</el-button>
          <el-button @click="counte">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { enterpriseAdd, enterpriseEdit } from '@/api/business.js'
export default {
  props: ['value'],
  data() {
    return {
      mode: 'add', // add:新增   edit：编辑
      form: {
        eid: '',
        name: '',
        short_name: '',
        intro: '',
        remark: ''
      },
      rules: {
        eid: [{ required: true, message: '必填', trigger: 'change' }],
        name: [{ required: true, message: '必填', trigger: 'change' }],
        short_name: [{ required: true, message: '必填', trigger: 'change' }],
        intro: [{ required: true, message: '必填', trigger: 'change' }]
      }
    }
  },
  computed: {
    title() {
      return { add: '新增学科', edit: '编辑学科' }[this.mode]
    }
  },
  methods: {
    // 点击取消关闭弹框
    counte() {
      this.$emit('input', false)
      this.$refs.form.resetFields()
      this.form = {
        eid: '',
        name: '',
        short_name: '',
        intro: '',
        remark: ''
      }
    },
    // 点击确定按钮
    confirm() {
      this.$refs.form.validate(async(rules) => {
        if (rules) {
          if (this.mode === 'add') {
            await enterpriseAdd(this.form)
            this.$message.success('新增成功')
          } else if (this.mode === 'edit') {
            await enterpriseEdit(this.form)
            this.$message.success('编辑成功')
          }
          this.counte()
          this.$emit('getData')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.datop {
  color: #fff;
  ::v-deep .el-dialog__header {
    background-image: linear-gradient(
      to right,
      rgb(1, 196, 249),
      rgb(19, 148, 250)
    );
  }
  ::v-deep i.el-dialog__close.el-icon.el-icon-close {
    color: #fff;
  }
  .title {
    color: #fff;
  }
}
</style>
